<template>
  <div id="PressureBoard"></div>
</template>

<script>

import * as echarts from 'echarts';
export default {
    name: "PressureBoard",
    data() {
        return {
            // 刻度预处理
            kd: [],
            // 渐变处理
            Gradient3: [
                [
                    {
                        offset: 0.2,
                        color: '#00BFFF'
                    }, {
                        offset: 0.4,
                        color: '#40E0D0'
                    },{
                        offset: 0.6,
                        color: '#93FE94'
                    }
                ],
                [
                    {
                        offset: 0.2,
                        color: '#00BFFF'
                    }, {
                        offset: 0.4,
                        color: '#40E0D0'
                    },{
                        offset: 0.6,
                        color: '#93FE94'
                    }, {
                        offset: 0.8,
                        color: '#ADFF2F'
                    }, {
                        offset: 0.9,
                        color: '#FFFF00'
                    }, {
                        offset: 1,
                        color: '#FFD700'
                    },
                ],
                [
                    {
                        offset: 0.1,
                        color: '#00BFFF'
                    }, {
                        offset: 0.2,
                        color: '#40E0D0'
                    },{
                        offset: 0.3,
                        color: '#93FE94'
                    }, {
                        offset: 0.4,
                        color: '#ADFF2F'
                    }, {
                        offset: 0.5,
                        color: '#FFFF00'
                    }, {
                        offset: 0.6,
                        color: '#FFD700'
                    }, {
                        offset: 0.7,
                        color: '#FFA500'
                    }, {
                        offset: 0.8,
                        color: '#FF7F50'
                    }, {
                        offset: 0.9,
                        color: '#FF6347'
                    }, {
                        offset: 1,
                        color: '#FF0000'
                    }
                ],
            ],
            Gradient: [],  // 当前的笔刷
            // 实际温度
            TP_value: '',
            // 需显示的温度柱形长度
            showValue: '',
            // 温度计初始化数据
            echartsOption:{
                grid:{
                    left: "20%",
                    top: "-75%",
                    right: "10%",
                    bottom: "8%"
                },
                // backgroundColor: '#FFFFFF',
                title: {
                    text: '温度计',
                    show: false,
                },
                yAxis: [
                    {
                        show: false,
                        data: [-5],
                        min: 0,
                        max: 120,
                        axisLine: {
                            show: false,
                        },
                    }, {
                        show: false,
                        min: 0,
                        max: 60,
                    }
                ],
                xAxis: [
                    {
                        show: true,
                        min: -17,
                        max: 80,
                        data: [],
                        axisLine: {
                            show: false,
                        },
                        name: '      压力\n\n      ' + this.TP_value + 'N',
                        nameLocation: 'center',
                        nameTextStyle: {
                            frontStyle: 'normal',
                            fontSize: 20,
                        },
                        nameGap: -120, // 设置位置
                    }, {
                        show: false,
                        min: -18,
                        max: 85,
                        data: []
                    }, {
                        show: false,
                        min: -18,
                        max: 85,
                        data: []
                    }, {
                        show: false,
                        min: -4,
                        max: 85,
                    }
                ],
                series: [
                    {
                        name: '条',
                        type: 'bar',
                        // 对应上面XAxis的第一个对象配置
                        xAxisIndex: 0,
                        data: [{
                            value: this.showValue
                        }],
                        barWidth: 8,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.Gradient)
                            }
                        },
                        z: 2,
                    }, {
                        name: '白框',
                        type: 'bar',
                        xAxisIndex: 1,
                        barGap: '-100%',
                        data: [60],
                        barWidth: 14,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                barBorderRadius: 50,
                            }
                        },
                        z: 1
                    }, {
                        name: '外框',
                        type: 'bar',
                        xAxisIndex: 2,
                        barGap: '-100%',
                        data: [62],
                        barWidth: 23,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                barBorderRadius: 50,
                            }
                        },
                        z: 0
                    }, {
                        name: '圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 0,
                        symbolSize: 18,
                        itemStyle: {
                            normal: {
                                color: '#00BFFF',
                                opacity: 1,
                            }
                        },
                        z: 2
                    }, {
                        name: '白圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 1,
                        symbolSize: 24,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                opacity: 1,
                            }
                        },
                        z: 1
                    }, {
                        name: '外圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 2,
                        symbolSize: 32,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                opacity: 1,
                            }
                        },
                        z: 0
                    }, {
                        name: '刻度',
                        type: 'bar',
                        yAxisIndex: 0,
                        xAxisIndex: 3,
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                distance: 10,
                                color: 'black',
                                fontSize: 14,
                                formatter: function(params) {
                                    if (params.dataIndex > 60 || params.dataIndex < 0) {
                                        return '';
                                    } else {
                                        if (params.dataIndex % 10 === 0) {
                                            return params.dataIndex / 2 - 5;
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            }
                        },
                        barGap: '-100%',
                        data: this.kd, // 绑定温度计刻度数据
                        barWidth: 1,
                        itemStyle: {
                            normal: {
                                color: 'black',
                                barBorderRadius: 120,
                            }
                        },
                        z: 0
                    }
                ],
                markLine: {
                    data:[
                        {
                            name: '温度',
                            xAxis: 0,
                            lineStyle: { opacity: 0, color: '#000000' }
                        },
                        {
                            // 结束点的坐标
                            xAxis: 0,// 还是0,这里表示就是画在X轴的正下方
                            y: 100
                        }
                    ],
                    animation: false
                }
            }
        }
    },
    created () {

    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    mounted () {
        this.PressureBoard = echarts.init(document.getElementById('PressureBoard'), 'light');
        this.initChartOption();
        this.PressureBoard.setOption(this.echartsOption);
        setInterval(this.addData, 2000);
    },
    methods: {
        getTpValue : function () {
            return Math.round(Math.random() * 250) / 10.0;
        },
        getShowValue: function () {
            let res;
            // 从接口获取温度数据，这里先random
            let tp_value = this.getTpValue();
            // 根据情况设置高度
            if(tp_value > 25) {
                res = 59.5
            } else {
                if(tp_value < -5) {
                    res = 0;
                } else {
                    res = (tp_value + 5) * 2
                }
            }
            this.TP_value = tp_value;
            this.showValue = res;
            if (this.TP_value >= 16) {
                this.Gradient = this.Gradient3[2];
            } else if (this.TP_value >= 8) {
                this.Gradient = this.Gradient3[1];
            } else {
                this.Gradient = this.Gradient3[0];
            }
            this.echartsOption.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 1, 0, 0, this.Gradient);
            this.echartsOption.xAxis[0].name = '      压力\n\n       ' + this.TP_value + 'N';
            return res;
        },
        initChartOption : function() {
            // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
            for (let i = 0, len = 60; i <= len; i += 1) {
                if (i % 10 === 0) {
                    this.kd.push('-4');
                } else {
                    this.kd.push('-2');
                }
            }
            //赋值到echartsOption中
            this.echartsOption.series[6].data = this.kd;
            this.echartsOption.series[0].data[0] = this.getShowValue();
        },
        testData : function () {
            //赋值到echartsOption中
            this.echartsOption.series[0].data[0] = this.getShowValue();
            this.PressureBoard.setOption(this.echartsOption);
        },
        addData : function() {
            this.$axios.get(this.GLOBAL.serverIp + '/api/pressureBoard/').then((res) => {
                //赋值到echartsOption中
                this.echartsOption.series[0].data[0] = res.data.val;
                this.PressureBoard.setOption(this.echartsOption);
            });
        }
    }
}
</script>

<style>
#PressureBoard {
    width: 50%;
    height: 225px;
    /*autoResize: true;*/
    float: left;
}
</style>
